<!--{template inc/header}-->
<div id="todo-page" data-tab="{core::R('a')}" style="max-width:100%">
	<x-header :right-options="{showMore: true}" :left-options="{showBack:true,backText:''}" @on-click-more="">
		TodoForMzPHP
	</x-header>
	<group class="no_margin_top">
		<x-input title="名称" :value.sync="newTodo" placeholder="请输入待办事项" @keyup.enter="add(newTodo)"></x-input>
		<x-button type="primary" @click="add(newTodo)">添加待办</x-button>
	</group>
	<group class="todo_item no_margin_top">
		<tab>
			<tab-item v-for="tab in tabList" :selected="tabIndex == tab.index" @click="tabChange(tab)">
				{{ tab.name }}
				<badge :text="todoCount(tab)"></badge>
			</tab-item>
		</tab>
		<template v-for="item in todoList|filterBy filterFunc |sortBy dateline">
			<cell :class="item.completed > 0 ? 'finished':''" :title="item.todo" primary="title">
				<span class="iconfont icon-selected" slot="icon" @click="done(item)"></span>
				<span class="iconfont icon-delete" @click="delTodo = item"></span>
			</cell>
		</template>
	</group>
	<!--{template inc/tabbar}-->
	<confirm :show.sync="delTodo != null" title="确认" @on-confirm="del(delTodo)" @on-cancel="delTodo=null" cancel-text="取消" confirm-text="删除">
		<p style="text-align:center;">确认删除:{{ delTodo.todo }}？</p>
	</confirm>
</div>
<!--{template inc/vux}-->
<!--{static ../static/v1/index.js _index.js}-->
<!--{template inc/footer}-->